<template>
  <div class="channel panel">
    <div class="inner">
      <h3>渠道分布</h3>
      <div class="data">
        <div class="radar" id="radar"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { channelOption } from "./options/channelOption";
export default {
  data() {
    return {};
  },
  mounted() {
    this.render();
  },
  methods: {
    render() {
      var chartDom = document.getElementById("radar");
      var myChart = this.$echarts.init(chartDom);
      channelOption && myChart.setOption(channelOption);
      window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
      });
      return myChart;
    },
  },
};
</script>

<style scoped>
.channel {
  flex: 1;
  height: 2.9rem;
}
.channel {
  margin-right: 0.25rem;
}
.channel .data {
  overflow: hidden;
}
.channel .data .radar {
  height: 2.1rem;
  width: 100%;
}
.channel h4 {
  color: #fff;
  font-size: 0.4rem;
  margin-bottom: 0.0625rem;
}
.channel small {
  font-size: 50%;
}
.channel span {
  display: block;
  color: #4c9bfd;
  font-size: 0.175rem;
}
</style>
